import React from "react";

class App extends React.Component {
  state = {
    num: 1,
    age: 18,
  };

  render() {
    console.log("Render");
    return (
      <div>
        <h1>App</h1>
        <button
          id="btn"
          onClick={() => {
            // 对象形式的 setState 会合并，导致如下代码只 + 1
            //    为何会合并，是React内部的性能考虑
            //    setState 可以看成是请求更新但不是立即更新
            // this.setState({ num: this.state.num + 1 });
            // this.setState({ num: this.state.num + 1 });
            // this.setState({ num: this.state.num + 1 });
            // this.setState({ num: this.state.num + 1 });
            // this.setState({ num: this.state.num + 1 });

            /**
             * 函数形式的 setState 也会合并，也是性能考虑，但是能保证函数的 state 是最新的引用
             */
            this.setState((state) => ({ num: state.num + 1 }));
            this.setState((state) => ({ num: state.num + 1 }));
            this.setState((state) => ({ num: state.num + 1 }));
            this.setState((state) => ({ num: state.num + 1 }));
            this.setState((state) => ({ num: state.num + 1 }));

            // console.log("onClick");
            // this.state.num++;
            // // this.render(); // 不要尝试自己调用 render 函数
            // this.forceUpdate(); // 可以实现效果，但不推荐这样玩
          }}
        >
          {this.state.num}
        </button>
      </div>
    );
  }
}

class Test extends React.Component {
  state = {
    count: 100,
  };

  render() {
    return (
      <div>
        <h1>Test</h1>
        <button
          onClick={() => {
            // this.setState({ count: this.state.count + 1 });
            // console.log(this.state.count);
            // this.setState({ count: this.state.count + 100 });

            this.setState((state) => ({ count: state.count + 1 }));
            this.setState((state) => ({ count: state.count + 100 }));
          }}
        >
          点我, {this.state.count}
        </button>
      </div>
    );
  }
}

export default Test;
